<template>
    <div class="content">
      <div class="content-head">
          <el-input clearable size="small" placeholder="输入备货单进行查询"></el-input>
          <el-button type="primary" size="small" icon="el-icon-search">搜索</el-button>
      </div>
      <div class="content-table">
          <el-table border style="width: 100%" max-height="400">
              <el-table-column prop="lineName" label="备货单号" width=""></el-table-column>
              <el-table-column prop="lineCode" label="总数量" width=""></el-table-column>
              <el-table-column prop="lineIp" label="已完成数量" width=""></el-table-column>
              <el-table-column prop="lineIp" label="未完成数量" width=""></el-table-column>
              <el-table-column prop="lineIp" label="完成百分比" width=""></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="{row, $index}">
                      <el-button type="primary" size="mini" @click="tab_edit_btn(row)" style="margin-right:10px;">编辑</el-button>
                      <el-popconfirm title="确定删除吗？" @onConfirm="pop_confirm_btn(row)">
                          <el-button slot="reference" type="info" size="mini">删除</el-button>
                      </el-popconfirm>
                  </template>
              </el-table-column>
          </el-table>
      </div>
      <div class="content-pagination">
          <!-- 分页 -->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="prev, pager, next, total, sizes, jumper" :total="total" background></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  //import {  } from "@/api/project.js";
  export default {
    name: "rpaTable",
    data(){
      return {
          tableData:[],
          currentPage:1,
          pageSize:10,
          total:0,
      }
    },
    mounted(){
        
    },
    methods: {
      //分页获取当前列表数据
      async getTableList(){
          let res = await reqProductionIPBindsList (this.currentPage, this.pageSize);
          if(res.data.code === 200){
              let list = res.data.data.content.map(item => {
                  return {id:item.id,lineCode:item.lineCode,lineIp:item.lineIp,lineName:item.lineName}
              });
              this.tableData = list;
              this.total = res.data.data.totalElements;
              //this.$message({type:"success",message:"产线列表数据获取成功!"});
          } else {
              this.$message({type:"error",message:"产线列表数据获取失败!"});
          }
          console.log("获取列表页面数据",res);
      },
      //新增产线编码ip
      async addProductionIPBinds (){
          if(this.dialogForm.lineCode === "" || this.dialogForm.lineIp === "" || this.dialogForm.lineName === "") {
              this.$message({type:"warning",message:"请将内容填写完整!"});
          }
          let res = await reqSaveProductionIPBinds(this.dialogForm.lineCode,this.dialogForm.lineIp,this.dialogForm.lineName);
          if(res.data.code === 200){
              this.$message({type:"success",message:"新增成功!"});
              this.dialogFormVisible = false;
              this.dialogForm.lineCode = "";
              this.dialogForm.lineIp = "";
              this.dialogForm.lineName = "";
              this.dialogState = "";
              //重新获取数据
              this.getTableList();
          } else {
              this.$message({type:"error",message:"添加失败,请重试!"});
          }
          console.log("新增产线api",res);
      },
      //修改产线编码ip
      async updateProductionIPBinds (){
          if(this.dialogForm.lineCode === "" || this.dialogForm.lineIp === "" || this.dialogForm.lineName === "" || this.dialogForm.id === "") {
              this.$message({type:"warning",message:"请将内容填写完整!"});
          }
          const paramsObj = {
              id:this.dialogForm.id,
              lineName:this.dialogForm.lineName,
              lineIp:this.dialogForm.lineIp,
              lineCode:this.dialogForm.lineCode
          }
          let res = await reqUpdateProductionIPBinds(paramsObj);
          if(res.data.code === 200){
              this.$message({type:"success",message:"更新成功!"});
              this.dialogFormVisible = false;
              this.dialogForm.lineCode = "";
              this.dialogForm.lineIp = "";
              this.dialogForm.lineName = "";
              this.dialogState = "";
              //更新数据
              this.getTableList();
          } else {
              this.$message({type:"success",message:"更新失败!"});
          }
          console.log('修改产线api',res);
      },
      //添加按钮
      add_btn(){
          this.dialogFormVisible = true;
          this.dialogState = "新增产线编码";
      },
      //dialog取消按钮
      dialogForm_cancel(){
          this.dialogFormVisible = false;
          this.dialogState = "";
          this.dialogForm.lineName = "";
          this.dialogForm.lineCode = "";
          this.dialogForm.lineIp = "";
          this.dialogForm.id = "";
      },
      dialogForm_confirm(){
          console.log(this.dialogState);
          if(this.dialogState === "新增产线编码"){
              this.addProductionIPBinds();
          } else if(this.dialogState === "修改产线编码"){
              this.updateProductionIPBinds();
          }      
      },
      //表格中的编辑和删除按钮
      tab_edit_btn(row) {
          this.dialogState = "修改产线编码";
          this.dialogFormVisible = true;
          this.dialogForm.lineName = row.lineName;
          this.dialogForm.lineCode = row.lineCode;
          this.dialogForm.lineIp = row.lineIp;
          this.dialogForm.id = row.id;
      },
      //pop气泡消息 删除 的确定和取消按钮
      async pop_confirm_btn(row){
         let res = await reqDeleteProductionIPBinds(row.id);
         if(res.data.code === 200){
          this.$message({type:"success",message:"删除成功!"});
          this.getTableList();
         } else {
          this.$message({type:"warning",message:"删除失败,请重试!"});
         }
         console.log('删除产线编号',res);
      },
      handleSizeChange(val){
          this.pageSize = val;
          this.getTableList();
      },
      handleCurrentChange(val){
          this.currentPage = val;
          this.getTableList();
      }
    },
  };
  </script>
  
  <style lang='scss' scoped>
  .content{
      width: 100%;
      height: 100%;
      padding: 2vh 2vw;
      box-sizing: border-box;
  
      .content-head{
          margin: 2vh 0;
      }
      .content-pagination{
          margin: 2vh 0;
      }
  }
  </style>